<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02class操作</title>
    <style>
        .basic {
            background-color: pink;
            font-size: 32px;
            color: red;
        }
        .bigger {
            font-size: 40px;
        }

    </style>
</head>
<body>
    <input type="button" value="添加basic类">
    <input type="button" value="添加bigger类">
    <input type="button" value="移除bigger类">
    <input type="button" value="判断是否有bigger类">
    <input type="button" value="切换">
    <ul>
        <li class="aa bb cc">1</li>
        <li class="aa bb cc">2</li>
        <li class="aa bb cc">3</li>
        <li class="aa bb cc">4</li>
    </ul>

    <script src="../jquery-3.2.1.js"></script>
    <script>
        
        $(function(){
            // 添加类
            $("input").eq(0).click(function(){
                $("li").addClass("basic");
            });

            $("input").eq(1).click(function(){
                $("li").addClass("bigger");
            });

            $("input").eq(2).click(function(){  // 移除类
                $("li").removeClass("bigger");
            });

            $("input").eq(3).click(function(){   // 判断类
                console.log($("li").hasClass("bigger"));
            });

            $("input").eq(4).click(function(){   // 判断类
                // 判断li有没有basic类 有就移除 没有添加
                // if($("li").hasClass("basic")){
                //     $("li").removeClass("basic");
                // }else{
                //     $("li").addClass("basic");
                // }

                $("li").toggleClass("basic");
            });


        });
    
    </script>
</body>
</html>